// 渐变水平进度条
import QtQuick 2.15

Item {
    id: root
    
    property real value: 0
    property real minimum: 0
    property real maximum: 100
    property real progress: Math.max(0, Math.min(1, (value - minimum) / (maximum - minimum)))
    
    property color startColor: "#2B4AFF"
    property color endColor: "#FF42D5"
    property color backgroundColor: "#FFFFFF"
    property real backgroundOpacity: 0.2
    
    Rectangle {
        id: background
        anchors.fill: parent
        radius: height / 2
        color: backgroundColor
        opacity: backgroundOpacity
    }
    
    Rectangle {
        id: progressBar
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: parent.width * progress
        radius: height / 2
        clip: true
        
        // 使用 Canvas 绘制水平渐变（从左到右）带圆角
        Canvas {
            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d");
                var radius = parent.height / 2; // 圆角半径
                var width = parent.width;
                var height = parent.height;
                
                // 创建水平渐变（从左到右）
                // 调整颜色停止点，让蓝色占更多比例
                var gradient = ctx.createLinearGradient(0, 0, width, 0);
                gradient.addColorStop(0, startColor);      // 0% 位置：蓝色
                gradient.addColorStop(0.5, startColor);    // 70% 位置：仍然是蓝色
                gradient.addColorStop(1, endColor);        // 100% 位置：粉色
                
                // 绘制圆角矩形
                ctx.beginPath();
                ctx.moveTo(radius, 0);
                ctx.lineTo(width - radius, 0);
                ctx.quadraticCurveTo(width, 0, width, radius);
                ctx.lineTo(width, height - radius);
                ctx.quadraticCurveTo(width, height, width - radius, height);
                ctx.lineTo(radius, height);
                ctx.quadraticCurveTo(0, height, 0, height - radius);
                ctx.lineTo(0, radius);
                ctx.quadraticCurveTo(0, 0, radius, 0);
                ctx.closePath();
                
                // 填充渐变
                ctx.fillStyle = gradient;
                ctx.fill();
            }
            onWidthChanged: requestPaint();
            onHeightChanged: requestPaint();
        }
    }
}

